<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      version="3.1"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <title>Notification Page</title>
        <style  type="text/css">
            #logo{
                position: absolute;
                margin-top: -26px;
            }
            #topContent{
                font-size: 25px; 
                /*margin-right: 27px;*/
                margin-top: 2px;
                /*                border-color: green;
                                border-width: 2px;
                                border-style: solid;*/
                text-align: right;
            }
            #topImages{
                /*margin-left: 86%;*/
                margin-top: 2px;
                margin-right: 20px;
                /*                border-color: blue;
                                border-width: 2px;
                                border-style: solid;*/
                text-align: right;
                float: right;
                display: inline;
            }
            #topText{
                /*margin-right: 15%;*/
                margin-top: 5px;
                /*                border-color: red;
                                border-width: 2px;
                                border-style: solid;*/
                text-align: right;
                float: right;
                display: inline;
            }
            #notifications{
                margin-left: 0;
                font-family:Lucida Sans Unicode;
                font-size: 52px;
                margin-top: 30px;
                margin-bottom: 0;
                text-align: center;
            }
            /*            #notifications{
                            font-family:Lucida Sans Unicode;
                            font-size: 52px;
                            margin-top: 30px;
                            margin-bottom: 0;
                            margin-left: 39%;
                            text-align: center;
                            position: fixed;
                        }*/
            
            .ui-layout, .ui-layout-doc, .ui-layout-unit, .ui-layout-wrap, .ui-layout-bd, .ui-layout-hd{
                border: none;
            }
        </style>    
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit position="north" resizable="true" size="180">
                <div id="logo">
                    <p>
                        <h:link outcome="home">
                            <h:graphicImage  value="/images/meteocal2.png" width="30px" height="30px"/>
                            <h style="margin-top: -26px; margin-left:33px ;position: absolute">MeteoCal</h>
                        </h:link>
                    </p>
                </div>
                <div id="topContent">
                    <h:form>
                        <div id="topImages">
                            <h:link outcome="settings">
                                <h:graphicImage  value="/images/settings.png" width="36px" height="36px"/>
                            </h:link>
                            &nbsp;
                            <h:link outcome="findUser">
                                <h:graphicImage  value="/images/findUser.png" width="36px" height="36px"/>
                            </h:link>
                        </div>
                        <div id="topText">
                            <p:commandLink action="#{loginBean.logout()}" value="Logout"/>
                            &nbsp;
                            <h>#{userBean.name}</h>
                            &nbsp;
                        </div>
                    </h:form>
                    <br></br>
                    <p id="notifications">
                        Notifications
                    </p>
                </div>
            </p:layoutUnit>
            <p:layoutUnit position="center" resizable="true" size="1000">
                <c:forEach var="notification" items="#{notificationBean.notifications}">
                    <h:form>
                        <div style="display: inline; float: left; width: 77%;">
                            #{notification.date} #{notification.details} 
                        </div>
                        <div style="display: inline; float: right; witdh: 20%;
                             
                             ">
                            <p:commandButton ajax='false' action="#{notificationBean.acceptNotification(notification)}" value="Accept"/>
                            
                            <c:if test="#{notificationBean.isUpdate(notification)==false}">
                                &nbsp;
                                <p:commandButton ajax='false' action="#{notificationBean.declineNotification(notification)}" value="Decline"/> 
                            </c:if>
                        </div>
                        <br></br>
                        <br></br>
                    </h:form>
                    <br/>
                </c:forEach>
                <p id="notifications">
                    Events
                    <p:dataTable  id="tbl" var="event" value="#{eventBean.events}"
                                  paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} "
                                  paginator="true"
                                  rows="10" style="margin-bottom:20px">
                        
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Event" />
                            </f:facet>
                            <h:outputText value="#{event.title}" />
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Invitees" />
                            </f:facet>
                            <ui:repeat var="invitation" value="#{invitationBean.getInvitationByEvent(event)}">
                                #{invitation.userInvited.name} (#{invitation.userInvited.email})
                            </ui:repeat>
                        </p:column>
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Participants" />
                            </f:facet>
                            <ui:repeat var="invitation" value="#{invitationBean.getInvitationAcceptedByEvent(event)}">
                                #{invitation.userInvited.name} (#{invitation.userInvited.email})
                            </ui:repeat>
                        </p:column>
                    </p:dataTable>
                </p>
                
                
            </p:layoutUnit>
            <p:layoutUnit position="west" resizable="true" size="60"/>
            <p:layoutUnit position="east" resizable="true" size="60"/>
        </p:layout>
    </h:body>
</html>
